<template>
    <div class="conintar">
        <Title :num='num' v-if="floorName" :floorName='floorName'/>
        <div class="foot-warpper" v-if="floor1 && floor1.length">
            <div class="foot-top ">
                <div class="foot-top-left border-right "><img :src="floor1[0].image"  @click="details(floor1[0].goodsId)"></div>
                <div class="foot-top-right">
                    <div class="border-bottom"><img :src="floor1[1].image" @click="details(floor1[1].goodsId)"></div>
                    <div class="border-bottom"><img :src="floor1[2].image" @click="details(floor1[2].goodsId)"></div>
                </div>
            </div>
            <div class="foot-bot border-top">
                <div><img :src="floor1[3].image" @click="details(floor1[3].goodsId)"></div>
                <div class="border-left"><img :src="floor1[4].image" @click="details(floor1[4].goodsId)"></div>
            </div>
        </div>
    </div>
</template>
<script>
import Title from 'components/Title'
import {mapMutations} from 'vuex'
export default {
    props:['floorName','floor1','num'],
    components: {
        Title
    },
    created() {
      console.log('floor1: ', this.floor1);
    },
    methods: {

        details(goodsId) {
            let a = {
                goodsId
            }
            this.setGoodDetails(a)
            this.$router.push({path:`/home/${goodsId}`})
        },

        ...mapMutations({
            setGoodDetails: 'goodsDetail'
        })
    }
}
</script>
<style lang="less" scoped>
    .foot-warpper {
        display: flex;
        flex-direction: column;
        .foot-top {
           display: flex;
            .foot-top-left, .foot-top-right {
              flex: 1;
            }
            .foot-top-left
               {
                  img {
                      width: 100%;
                      height: 100%;
                      object-fit: cover;
                  }
               }
            .foot-top-right {
                display: flex;
                flex-direction: column;
                img {
                  width: 100%;
                }
            }
        }
        .foot-bot {
          display: flex;
            div {
              flex: 1;
                img {
                  width: 100%;
                }
            }
        }
    }
</style>

